<template>
  <div class="bg-grey tab-panel">
    <van-pull-refresh v-model="isLoading" @refresh="pullRefresh">
      <img
        slot="loading"
        class="loading-gif-refresh"
        src="../../assets/loading.gif"
      >
      <form>
        <div class="search-area-title">
          <van-row type="flex" justify="space-between">
            <van-col span="21">
              <van-search
                :show-action="showCancel"
                v-model="searchValue"
                placeholder="请输入搜索标题"
                @search="onSearch"
                @cancel="onCancel"
              />
            </van-col>
            <van-col span="3" class="align-center">
              <img @click="filtratePopup = true" class="search-img" :src="showFiltrateData.length > 0?require('../../assets/documents/shaixuan_active.png'):require('../../assets/documents/shaixuan.png')">
            </van-col>
          </van-row>
        </div>
        <div v-if="showFiltrateData.length > 0" class="filtershow ">
          <p class="van-ellipsis">
            <span>筛选：</span>
            <span class="filter-span" v-for="(item, index) in showFiltrateData" :key="index">
              {{item.title}}
            </span>
          </p>
          <img class="filter-x" @click="filtrateCancel" src="../../assets/documents/filterDelete.png">
        </div>
      </form>
      <template v-if="list.length <= 0">
        <div class="no-data-img">
          <img src="../../assets/meeting/no-data.png">
          <p>暂无相关数据~</p>
        </div>
      </template>
      <van-list 
        v-else 
        v-model="loading" 
        :finished="finished" 
        finished-text="没有更多了" 
        @load="onload">
        <van-card v-for="(item, index) in list" :key="index" @click="toDetail(item.id, item.tpltype, item.flow.flownum)" >
          <div slot="thumb">
            <template v-if="item.img">
              <img class="head-img" :src="`${$common.filePath}${item.img}`" />
            </template>
            <template v-else>
              <img class="head-img" src="../../assets/notification/cell_head.png">
            </template>
          </div>
          <div slot="title">
            <p class="title-class van-ellipsis">{{ item.username }} - {{ item.typename }}</p>
          </div>
          <div slot="desc">
            <p class="desc-info-class van-ellipsis">标题：{{ item.title }}</p>
            <!-- <p class="desc-info-class">流水号：{{ item.number }}</p> -->
            <p class="desc-info-class">时间：{{ item.date }}</p>
            <!-- <template v-if="item.type == '0'">
              <p class="desc-box-class" :class="getTypeclass(item.per.pertype)">
                <van-row :span="24" class="van-ellipsis">
                  {{item.flow.flowname}} {{item.per.name}} 
                {{getTypename(item.per.pertype)}}</van-row>
              </p>
            </template> -->
            <template v-if="item.personnel_type == '0'">
              <p class="desc-box-class" :class="getTypeclass(item.personnel_type)">
                <van-row :span="24" class="van-ellipsis">
                  {{item.flow.flowname}} {{item.list.name}} 
                {{getTypename(item.personnel_type)}}</van-row>
              </p>
            </template>
            <template v-if="item.personnel_type == '1'">
              <p class="desc-box-class van-ellipsis" :class="getTypeclass(item.personnel_type)">
                已转交他人会签
              </p>
            </template>
            <template v-if="item.personnel_type == '2'">
              <p class="desc-box-class van-ellipsis" :class="getTypeclass(item.personnel_type)">
                已委托他人办理
              </p>
            </template>
            <template v-if="item.personnel_type == '3'">
              <p class="desc-box-class van-ellipsis" :class="getTypeclass(item.personnel_type)">
                已挂起
              </p>
            </template>
            <template v-if="item.personnel_type == '4'">
              <p class="desc-box-class recover-flex" :class="getTypeclass(item.personnel_type)">
                流程被撤销
              <van-button v-if="item.uid == $store.state.userId" type="danger" size="mini" @click.stop="recoverDelete(item.id)">删除</van-button>
              </p>
            </template>
          </div>
        </van-card>
      </van-list>
    </van-pull-refresh>

    <!-- 筛选弹出框 -->
    <van-popup v-model="filtratePopup" round lock-scroll position="bottom" class="filtrete-pop"
    @click-overlay="filtrateClose">
      <van-nav-bar title="筛选" class="filtrate-title"/>
      <div class="filtrate-content">
        <van-checkbox-group v-model="filtrateResult" @change="onclick">
          <div v-for="(item,index) in filtrateTree" :key="index" v-if="item.son.length > 0">
            <p class="filtrate-content-title">{{item.typename}}</p>
            <van-row>
              <van-col span="11" v-for="(son, sindex) in item.son" :key="sindex+'son'" :offset="sindex%2==1?'2':''">
                <van-checkbox :ref="`filtrateItem${index}${sindex}`" class="filtrate-choose" :name="son.tplid">{{son.title}}</van-checkbox>
              </van-col>
            </van-row>
          </div>
        </van-checkbox-group>
      </div>
      <van-row type="flex" justify="space-between" class="filtrate-button">
        <van-col span="12">
          <div class="default-class" @click="filtrateCancel">重 置</div>
        </van-col>
        <van-col span="12">
          <div class="info-class" @click="filtrateChose">确 定</div>
        </van-col>
      </van-row>
    </van-popup>

  </div>
</template>

<script type="text/javascript">
  export default {
    data () {
      return {
        isLoading: false,
        loading: false,
        finished: false,
        list: [],//数组
        listPage: 1,

        showCancel: false,
        searchValue: '',

        filtrateTree: [],
        filtratePopup: false, //筛选弹出框控制器
        filtrateResult: [],
        showFiltrateData: [],
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle',{title: "公文监控"})
      this.$bridge.callHandler('navBack')
      this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
        this.$router.push({name: "documentsHandle"})
        responseCallback("go(-1)")
      })
      this.getList(true, true)
      this.getFiltrateData()
    },
    watch: {
      /**
       * 筛选框
       */
      'filtratePopup': {
        handler(newV, oldV){
          if (this.filtratePopup) {
            this.$bridge.callHandler('navKeepView')
            this.filtrateTree.forEach((tree,index) => {
              tree.son.forEach((son,sonindex) => {
                this.showFiltrateData.forEach((filtrate, findex) => {
                  if (son.tplid == filtrate.tplid) {
                    this.$refs['filtrateItem' + index +  sonindex][0].$el.classList.add("filtrate-choose_active")
                  }
                })
              })
            })
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      }
    },
    methods: {
      /**
       * 下拉
       * @return {[type]} [description]
       */
      pullRefresh () {
        setTimeout(_ => {
          this.getList(true, false)
        },500)
      },
      /**
       * 上拉
       * @return {[type]} [description]
       */
      onload () {
        this.getList(false, false)
      },
      /**
       * 数据list
       */
      getList (init, showToast) {
        this.loading = true
        let tplids = []
        tplids = this.showFiltrateData.map(item => {
          return item.tplid
        })
        if (init) {
          this.listPage = 1
          this.finished = false
        }
        let config = {
          method: "POST",
          url: `${this.$common.basePath}documentlist.php`,
          data: {
            do: "mana",
            user_id: this.$store.state.userId,
            page: this.listPage++,
            title: this.searchValue,
            tplid: tplids
          }
        }
        if (showToast) {
          this.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        if(!this.finished || init) {
          this.$axios(config).then(res => {
            this.loading = false
            this.list = init ? res.data.document : this.list.concat(res.data.document)
            if (this.list.length >= res.data.count) {
              this.finished = true
            }
            this.isLoading = false
            this.$toast.clear()
          }).catch(err => {
            this.$toast.clear()
            this.loading = false
          })
        }
      },
      /**
       * 搜索栏
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      onSearch (value) {
        if (value) {
          this.showCancel = true
        }
        this.getList(true, true)
      },
      /**
       * 取消搜索
       * @return {[type]} [description]
       */
      onCancel () {
        this.showCancel = false
        this.getList(true, true)
      },
      /**
       * 点击进去详情
       * @return {[type]} [description]
       */
      toDetail (id, type, step) {
        this.$router.push({ name:"monitorDetail", query:{ id:id, type:type, step:step } })
      },

      /*
        * 获取筛选数据
       */
      getFiltrateData() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}document.php`,
          data: {
            do: "applistall",
            user_id: this.$store.state.userId,
          }
        }
        this.$axios(config).then(res => {
          this.filtrateTree = res.data
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 选择事件
       * @return {[type]} [description]
       */
      onclick(e) {
        let self = this
        // 给元素动态添加class
        self.filtrateTree.forEach((tree,index) => {
          tree.son.forEach((son,sonindex) => {
            if (self.$refs['filtrateItem' + index + sonindex][0].checked) {
              // console.log(1)
              self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.add("filtrate-choose_active")
            } else {
              // console.log(2)
              self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.remove("filtrate-choose_active")
            }
          })
        })
      },
      /**
       * 点击蒙层关闭筛选框
       * @return {[type]} [description]
       */
      filtrateClose() {
        let self = this
        // 给元素动态重置class
        self.filtrateTree.forEach((tree,index) => {
          tree.son.forEach((son,sonindex) => {
            if (self.$refs['filtrateItem' + index + sonindex][0].checked) {
              self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.remove("filtrate-choose_active")
            }
            self.showFiltrateData.forEach((filtrate, findex) => {
              if (son.tplid == filtrate.tplid) {
                self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.add("filtrate-choose_active")
              }
            })
          })
        })
        // 同时将v-model删掉
        self.filtrateResult = self.showFiltrateData.map(item => {
          return item.tplid
        })
      },
      /** 
       * 重置筛选--还原所有tab
       */
      filtrateCancel() {
        let self = this
        // 给元素动态添加class
        self.filtrateTree.forEach((tree,index) => {
          tree.son.forEach((son,sonindex) => {
            if (self.$refs['filtrateItem' + index + sonindex][0]) {
              // console.log(1)
              self.$refs['filtrateItem' + index +  sonindex][0].$el.classList.remove("filtrate-choose_active")
            }
          })
        })
        this.filtrateResult = []
        this.showFiltrateData = []
        // this.filtratePopup = false
        this.getList(true, true)
      },

      /**
       * 筛选
       * @return {[type]} [description]
       */
      filtrateChose() {
        this.filtratePopup = false
        this.getList(true, true)
        // 筛选条件显示---数据处理
        if (this.filtrateResult.length > 0) {
          // 先清空数据
          this.showFiltrateData = []
            this.filtrateResult.forEach(newItem => {
              this.filtrateTree.forEach(item => {
                item.son.forEach(child => {
                  if (newItem == child.tplid) {
                    this.showFiltrateData.push(child)
                  }
                })
              })
            })
          } else {
            this.showFiltrateData = []
          }
      },

      getTypename(type) {
        let typename = ""
        switch(type) {
          case '0':
            typename = '未审批'
            break;
          case '1':
            typename = '审批'
            break;
          case '2':
            typename = '拒绝'
            break;
          case '3':
            typename = '退回'
            break;
          case '4':
            typename = '等待审批'
            break;
          case '5':
            typename = '结束'
            break;
          default:
            typename = '结束'
        }
        return typename;
      },
      getTypeclass(type) {
        let typeclass = ''
        switch(type) {
          case '0':
            typeclass = 'agreen-class'
            break;
          case '1':
            typeclass = 'agreen-class'
            break;
          case '2':
            typeclass = 'defined-class'
            break;
          case '3':
            typeclass = 'defined-class'
            break;
          case '4':
            typeclass = 'agreen-class'
            break;
          case '5':
            typeclass = 'close-class'
            break;
          default:
            typeclass = 'close-class'
        }
        return typeclass;
      },
    }
  }
</script>

<style type="text/css" lang="less" scoped>
  .tab-panel  {
    -webkit-overflow-scrolling: touch;
    height: 100vh;
    overflow-y: auto;
    .van-list {
      min-height: calc(100vh - 12px);
    }
  }
  .margin-l-13 {
    margin-left: 13px;
  }
  .margin-t-10 {
    margin-top: 10px;
  }
  p{
    margin: 0;
  }
  // van-card
  .van-card {
    padding: 15px 15px 0 15px;
    background-color: #fff;
    margin-top: 0;
  }
  .van-card__thumb {
    width: auto;
    height: auto;
    margin-right: 15px;
  }
  .van-card__content {
    padding-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
  }
  .head-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }
  .title-class {
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    margin-bottom: 5px;
  }
  .desc-info-class {
    font-size: 14px;
    color: #999999;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .desc-box-class {
    margin-top: 5px;
    // height: 40px;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    // padding-left: 10px;
  }
   // 同意
  .agreen-class {
    // background-color: rgba(46, 121, 255, 0.06);
    color: rgb(46, 121, 255);
  }
  // 退回
  .defined-class {
    // background-color: rgba(245, 75, 3, 0.06);
    color: rgb(245, 75, 3);
  }
  // 结束
  .close-class {
    // background-color: rgba(1, 191, 101, 0.06);
    color: rgb(1, 191, 101);
  }
  // 撤销
  .revocation-class {
    // background-color: rgba(245, 167, 3, 0.06);
    color: rgb(245, 167, 3);
  }
  .no-data-img{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // padding: 40% 0 ;
    background-color: #fff;
    height: calc(100vh - 65px);

    img{
      width: 180px;
      height: 106px;
      text-align: center;
      margin-top: -90px;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
  .search-area {
    margin-top: 12px;
      .van-cell {
        line-height: 25px;
      }
    }
</style>